<template>	
	<view class="index-list animated fadeIn fast">
		<!--轮播图-->
		<view class="bgoods-uni-padding-wrap-top" :style="{backgroundImage:`url(${item.carousel_background_image})`}">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" style="height:280upx;" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(items,index) in item.carousel" :key="index" @click="navToRuter(items.route)">
							<view class="swiper-item uni-bg-red">
								<img :src="items.path" width="100%" mode="widthFix" lazy-load/>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
		<!--活动广告区-->
		<view class="home-list-item" style="padding:0upx;" v-if="item.ad && item.ad.length > 0">
			<view v-for="(items,index) in item.ad" :key="index">
				<view class="s-list-content" v-for="(value,key) in items.list" :key="key" @click="navToRuter(value.route)">
					<text class="s-item">{{value.name}}</text>
					<text class="s-item s-item-short">{{value.route.title}}</text>
					<view class="t-list-img">
						<image :src="value.path"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!--菜单-->
		<view class="menu" :style="{backgroundImage:`url(${item.menu_background_image})`}" v-if="item.menu && item.menu.length>0">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="20">
				<view class="nav-bar-wrap">
					<view class="scroll-view-item_H"  v-for="(items,index) in item.menu" :key="index">
						<view class="view-item-menu" @click="navToRuter(items.route)">
							<image :src="items.path" mode="widthFix" lazy-load></image>
							<text>{{items.name}}</text>
						</view>
					</view>		
				</view>
			</scroll-view>	
		</view>
		
		<view class="home-list-item" v-if="item.ad1 && item.ad1.length > 0">
			<view v-for="(items,index) in item.ad1" :key="index">
				<view class="s-list-content" v-for="(value,key) in items.list" :key="key" @click="navToRuter(value.route)">
					<text class="s-item">{{value.name}}</text>
					<text class="s-item s-item-short">{{value.route.title}}</text>
					<view class="t-list-img">
						<image :src="value.path"></image>
					</view>
				</view>
			</view>
		</view>
		<!--活动广告区结束-->
		
		<!--轮播图1-->
		<view class="uni-padding-wrap" style="position: relative;" v-if="item.carousel1 && item.carousel1.length > 0">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" style="height:230upx;" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(items,index) in item.carousel1" :key="index" @click="navToRuter(items.route)">
							<view class="swiper-item uni-bg-red">
								<img :src="items.path" width="100%" mode="widthFix" lazy-load/>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!--轮播结束-->
		
		
		<!--活动广告区2-->
		<view class="home-list-item" v-if="item.ad2 && item.ad2.length > 0">
			<view v-for="(items,index) in item.ad2" :key="index">
				<view class="s-list-content" v-for="(value,key) in items.list" :key="key" @click="navToRuter(value.route)">
					<text class="s-item">{{value.name}}</text>
					<text class="s-item s-item-short">{{value.route.title}}</text>
					<view class="t-list-img">
						<image :src="value.path"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import loadMore from "../../components/common/load-more"
	import commonList from "../../components/common/common-list"
	import tools from "../../common/tools.js"
	export default {
		props: {
			item: Object,
		},
		onLoad() {
			console.log(this.item)
		},
		data() {
			return {				
				swiperheight:500,//高度
				//菜单滑动
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				
				 // 轮播图
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				navbg:{
					background:'#ffffff00'
				},
				
				sale_status:0,
				price_status:0,
				commission_status:0,
				
			}
		},
		components:{
			loadMore,
			commonList,
			tools,
		},
		methods: {
			opendetail(){
				// 进入详情页
				uni.navigateTo({
					url:'../../pages/detail/detail?detailData=' + JSON.stringify(this.item)
				})
			},
			
			//跳转详情
			goodsdetail(goods){
				uni.navigateTo({
					url: '../product/product?site='+goods.Site+"&goods_id="+goods.GoodsId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			navToRuter(route){
				tools.router(route);
			},
			//轮播banner 菜单banner
			
			upper: function(e) {
			},
			lower: function(e) {
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			
			
			//商品搜索
			goods_search(items){
				uni.navigateTo({
					url:'../../pages/search/index?keyword='+items.name
				})
			},
			
			
			/**
			 * 最新排序
			 */
			get_goods_new(){
				this.sale_status=0
				this.price_status=0
				this.commission_status=0
				let params={type:'new',value:1}
				this.$emit('getorderbylistgoods',params)
			},
			
			
			/**
			 * 排序销量
			 */
			get_goods_sale(){
				this.price_status=0
				this.commission_status=0
				if(this.sale_status == 0){
					this.sale_status =1
				}else{
					this.sale_status == 1 ? this.sale_status=2 : this.sale_status=1
				}
				let params={type:'sale',value:this.sale_status}
				this.$emit('getorderbylistgoods',params)
			},
			
			/**
			 * 排序价格
			 */
			get_goods_price(){
				this.commission_status=0
				this.sale_status=0
				if(this.price_status == 0){
					this.price_status =1
				}else{
					this.price_status == 1 ? this.price_status=2 : this.price_status=1
				}
				let params={type:'price',value:this.price_status}
				this.$emit('getorderbylistgoods',params)
			},
			
			/**
			 * 排序佣金
			 */
			get_goods_commission(){
				this.price_status=0
				this.sale_status=0
				if(this.commission_status == 0){
					this.commission_status=1
				}else{
					this.commission_status == 1 ? this.commission_status=2 : this.commission_status=1
				}
				let params={type:'commission',value:this.commission_status}
				this.$emit('getorderbylistgoods',params)
			}
			
		}
	}
</script>

<style scoped>
	.bgoods-uni-padding-wrap-top{
		width:100%;
		position: relative;
		background-size: 100% 100%;
	}
	/*菜单*/
	.menu{
		width:96%;
		display: block;
		padding:2%;
		border-bottom-left-radius: 30upx;
		border-bottom-right-radius: 30upx;
		white-space: nowrap;
		background-size:100% 100%;
	}
	.nav-bar-wrap {      //  关键的样式
	  display: flex;
	  flex-flow: column wrap;
	  height: 400rpx;
	}
	.scroll-view_H{
		width: 99%;
		display: flex;
		flex-flow: column wrap;
		height: 400rpx;
	}
	.scroll-view-item_H{
		width: 20%;
		display: inline-block;
		flex-wrap: nowrap;
	}
	
	.view-item-menu{
		display: block;
		text-align:center;
		line-height:40px;
	}
	.view-item-menu>image{
		margin:0 auto;
		width:80%;
		display: block;
	}
	.view-item-menu text{
		display:inline-block;
	}
	
	
	/**广告开始**/
	.home-list-item{
		width:95%;
		margin:0 auto;
		padding:1% 0;
	}
	.home-list-item>view{
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.s-list-content{
		flex: 1;
		padding:1%;
	}
	.s-list-content>text:first-child{
		font-weight:bold;
		font-size:30upx;
	}
	.s-item-short{
		color:#ccc;
		font-size:25upx;
	}
	.s-item{
		width: 100%;
		display:block;
		text-align:center;
		
	}
	.t-list-img image{
		width:100%;
		height:200upx;
		margin-top:10upx;
		border-radius:15upx;
	}
	
	
	/*商品菜单*/
	.goods-menu{
		width:95%;
		display: block;
		margin: 30upx auto;
		border-radius:20upx;
		padding-top:20upx;
	}
	.goods-scroll-view-item_H{
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.goods-view-item-menu{
		width:15%;
		display: block;
		text-align:center;
		line-height:40px;
		padding: 0 5%;
	}
	.goods-view-item-menu>image{
		margin:0 auto;
		width:90%;
		height:60upx;
		display: block;
	}
	.goods-view-item-menu text{
		display:inline-block;
		font-size:20upx;
	}
	
	
	/*商品搜索栏目*/
	.goods-search-bar{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;	
	}
	.goods-search-menu{
		width: 25%;	
		display: block;
		text-align:center;
		line-height:40px;
	}
	.goods-search-menu>text{
		display: block;
	}
	.goods-search-image{
		width:40upx;
		height:40upx;
		display:inline-block;
		position:relative;
	}
	.goods-search-image>image{
		margin-left:10upx;
		margin-top:3upx;
		display:block;
		width:15upx;
	}
	
	.goods-index-detail{
		width:96%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
		padding:2%;
	}
	.goods-index-detail>view:nth-child(odd){
		margin-right:2%;
	}
	
	.s-list-detail{
		width:49%;
		margin-bottom:20upx;
	}
	.goods-index-title{
		width:100%;
		display:flex;
	}
	.goods-index-title>image{
		width:50upx;
		height:50upx;
		display:inline-block;
		position:relative;
	}
	.goods-index-title>text{
		display:block;
		padding-left:10upx;
		width:80%;
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.goods-index-money{
		margin-top:20upx;
	}
	.goods-index-money>text:first-child{
		background:#ffd9d9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#F76260;
		border-radius:5upx;
	}
	.goods-index-money>text:last-child{
		background:#8A6DE9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#fff;
		margin-left:20upx;
		border-radius:10upx;
	}
	.goods-index-price{
		color:#F76260;
	}
	.goods-index-price>text:first-child{
		font-size:40upx;
	}
	.goods-index-price>text:last-child{
		color:#ccc;
		margin-left:20upx;
	}
	.goods-index-shop{
		font-size:20upx;
		color:#ccc;
	}
	.goods-index-shop>text:last-child{
		margin-left:20upx;
	}
	
</style>
